
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" /> 
<script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=EJDBZ-GHO3D-MB24R-HJ3FZ-2B3Y6-52FBX&referer=myapp"></script>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=EJDBZ-GHO3D-MB24R-HJ3FZ-2B3Y6-52FBX"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container {
        width: 100%;
        height: 100%;
    }
	#mypos{display:block;position:absolute;top:20px;left:20px;z-index:10000;}
	#myMarker{transform:rotate(45deg);}
</style>
<title></title>
</head>
<body>

<div id="container"></div>
<button id="mypos" onclick="getMyLocation()">我的位置</button>
<script type="text/javascript">
	
	var map;
	var ClusterBubbleClick;	
	
	var drawContainer = document.getElementById('container');
	
	var center = new TMap.LatLng(39.953416, 116.380945);

	map = new TMap.Map('container', {
	  zoom: 11,
	  pitch: 40,
	  center: center
	});
	
	//腾讯地图 实例   https://lbs.qq.com/webDemoCenter/glAPI/glMap/mapCenter
	
	//监测地事件 实例  https://lbs.qq.com/webDemoCenter/javascriptV2/event/listenZoom
	
	
	map.on('zoom_changed',
	    function() {
	        //console.log("缩放地图",map.getZoom());
	    }
	);
	
	// 创建点聚合  聚合点 自定义样式 见index3.html 在index3.html中点聚合 通过display 来控制显示隐藏
	//index.html 通过删除dom 来控制点的多少
	var markerCluster = new TMap.MarkerCluster({
	  id: 'cluster',
	  map: map,
	  enableDefaultStyle: false, // 关闭默认样式
	  minimumClusterSize: 3,
	  geometries: [{ // 点数组
		position: new TMap.LatLng(39.953416, 116.480945)
	  },
		{
		  position: new TMap.LatLng(39.984104, 116.407503)
		},
		{
		  position: new TMap.LatLng(39.908802, 116.497502)
		},
		{
		  position: new TMap.LatLng(40.040417, 116.373514)
		},
		{
		  position: new TMap.LatLng(39.953416, 116.380945)
		},
		{
		  position: new TMap.LatLng(39.984104, 116.307503)
		},
		{
		  position: new TMap.LatLng(39.908802, 116.397502)
		},
		{
		  position: new TMap.LatLng(40.040417, 116.273514)
		},
	  ],
	  zoomOnClick: true,
	  gridSize: 60,
	  averageCenter: false
	});
	
	/*var infoWindow = new TMap.InfoWindow({
			map: map,
			position: new TMap.LatLng(39.953416, 116.480945),
			content: "<div style='border-radius:50%;overflow:hidden;'><img src='https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/em.jpg'></div>"
		});*/
	
	var clusterBubbleList = [];
	var markerGeometries = [];
	var marker = null;
	
	var dounarr=[];		
	// 监听聚合簇变化
	
	function jh(){
		markerCluster.on('cluster_changed', function (e) {
		  // 销毁旧聚合簇生成的覆盖物
		  if (clusterBubbleList.length) {
			clusterBubbleList.forEach(function (item) {
			  item.destroy();
			})
			clusterBubbleList = [];
		  }
		  markerGeometries = [];

		  // 根据新的聚合簇数组生成新的覆盖物和点标记图层
		  var clusters = markerCluster.getClusters();
		  //console.log(clusters)
		  clusters.forEach(function (item) {
			if (item.geometries.length > 1) {
				//console.log(item)
			  let clusterBubble = new ClusterBubble({
				map,
				position: item.center,
				content: item.geometries.length,
				color:"#0000ff"
			  });
			  clusterBubble.on('click', () => {
				 
				map.fitBounds(item.bounds);
			  });
			  clusterBubbleList.push(clusterBubble);
			} else {
			  markerGeometries.push({
				position: item.center
			  });
			}
			
			
			
		  });
		  //console.log(markerGeometries)
		   if(markerGeometries.length>0){
			  removeDom(dounarr) 
			  markerGeometries.forEach(function(item){
				 let donut = new Donut({
						map,
						position: item.position,
						color:"#00ff00",
						content: "123",
					  })
					 dounarr.push(donut.dom)
			  })
		  } 
		 
		  
		  
		  /*if (marker) {
			// 已创建过点标记图层，直接更新数据
			marker.setGeometries(markerGeometries);
		  } else {
			// 创建点标记图层
			marker = new TMap.MultiMarker({ // 添加多个标签 markerGeometries 是个位置数组 
			  map,
			  styles: {
				default: new TMap.MarkerStyle({
				  'width': 34,
				  'height': 42,
				  'anchor': {
					x: 17,
					y: 21,
				  },
				  'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png',
				}),
			  },
			  geometries: markerGeometries
			});
		  }*/
		});
	}
	
	
	function removeDom(arr){
		arr.forEach(function(item){
			item.remove();
		})
		
	}


	
	
	
	
	//******* 地图上添加点位**********************
	function Donut(options) {
		TMap.DOMOverlay.call(this, options);
	}

	Donut.prototype = new TMap.DOMOverlay();

	// 初始化
	Donut.prototype.onInit = function(options) {
		//console.log('options' , options)
		this.position = options.position;
		this.color = options.color;
		this.content = options.content;
	};

	// 销毁时需解绑事件监听
	Donut.prototype.onDestroy = function() {
		this.dom.removeEventListener('click', this.onClick);
		this.removeAllListeners();
	};
	Donut.prototype.onClick = function() {
	  this.emit('click');
	};
	// 创建DOM元素，返回一个DOMElement，使用this.dom可以获取到这个元素
	Donut.prototype.createDOM = function() {
		//console.log(this)
		let dom = document.createElement('div');
		 dom.innerHTML='<div class="positem" style="width:100%;height:100%;background:'+this.color+';border-radius:50%;"><img src="https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/em.jpg" style="width:50%;height:50%;border-radius:50%;color:#ff0000;">'+this.content+'</div>'
		dom.style.cssText ='position:absolute;top:0px;left:0px;width: 30px;height: 30px;line-height: 30px;border-radius: 50%;';
		
		/* this.onClick = this.onClick.bind(this);
		dom.addEventListener('click', this.onClick); */
		dom.addEventListener('click', function(){
			alert(123)
		});
		return dom;
	};

	// 更新DOM元素，在地图移动/缩放后执行
	Donut.prototype.updateDOM = function() {
		if (!this.map) {
			return;
		}

		// 经纬度坐标转容器像素坐标
		let pixel = this.map.projectToContainer(this.position);
		//console.log(pixel)
		// 使饼图中心点对齐经纬度坐标点
		let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
		let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
		this.dom.style.transform = `translate(${left}, ${top})`;
	};
	
	window.Donut = Donut;
	
	
	/*let Donut00 = new Donut({
				map,
				position: new TMap.LatLng(39.9986945980902, 116.33598362780685),
				content: "123",
	});*/
	jh()
	
	
//****************** 点聚合 添加的点位**************************************************************************	
	
	 // 以下代码为基于DOMOverlay实现聚合点气泡
	  function ClusterBubble(options) {
	    TMap.DOMOverlay.call(this, options);
	  }
	
	  ClusterBubble.prototype = new TMap.DOMOverlay();
	
	  ClusterBubble.prototype.onInit = function (options) {
	    this.content = options.content;
	    this.position = options.position;
	  };
	  
	  // 销毁时需要删除监听器
	  ClusterBubble.prototype.onDestroy = function() {
	  	this.dom.removeEventListener('click', this.onClick);
	    this.removeAllListeners();
	  };
	
	  ClusterBubble.prototype.onClick = function() {
	    this.emit('click');
	  };
	
	  // 创建气泡DOM元素
	  ClusterBubble.prototype.createDOM = function () {
	    var dom = document.createElement('div');
	    dom.classList.add('clusterBubble');
	    //dom.innerText = this.content;
		dom.innerHTML='<div style="width:100%;height:100%;border-radius:50%;color:#ff0000;"><img src="https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/em.jpg" style="width:100%;height:100%;border-radius:50%;">'+this.content+'</div>'
	    dom.style.cssText = [
		  'background: #00ff00;',
	      'width: 30px;',
	      'height: 30px;',
	      'line-height: 30px;',
		  'border-radius:50%;'
	    ].join(' ');
	      
	    // 监听点击事件，实现zoomOnClick
	    this.onClick = this.onClick.bind(this);
	    dom.addEventListener('click', this.onClick);
	    return dom;
	  };
	
	  ClusterBubble.prototype.updateDOM = function () {
	    if (!this.map) {
	      return;
	    }
	    // 经纬度坐标转容器像素坐标
	    let pixel = this.map.projectToContainer(this.position);
	
	    // 使文本框中心点对齐经纬度坐标点
	    let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
	    let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
	    this.dom.style.transform = `translate(${left}, ${top})`;
	
	    this.emit('dom_updated');
	  };
	
	  window.ClusterBubble = ClusterBubble;
		
//****** 获取我的位置****************************************************			
    /* var myLat="31.03241";
	var myLng="121.22654"; */
	var myLat="";
	var myLng="";
	var myMarkerGeometries="";
	var marker = ""
	function gotoMyLocation (){
		
	}
	getMyLocation()
	function getMyLocation(){
		var geolocationo = new qq.maps.Geolocation("EJDBZ-GHO3D-MB24R-HJ3FZ-2B3Y6-52FBX", "myapp");
		
		
		geolocationo.getLocation(res=>{ // // 此处必须要有 不然不能点位
			console.log(res);
			myLat=res.lat;
			myLng=res.lng;
			map.setCenter(new TMap.LatLng(myLat, myLng));
			/*marker && marker.setGeometries([ // 自定义marker 来标记定位位
				{
				  id: "myLocation",
				  styleId: "myMarker",
				  position: new TMap.LatLng(myLat, myLng)
				}
			  ]); */
		})
		
		geolocationo.watchPosition(res=>{
			//console.log(res)
			myLat=res.lat;
			myLng=res.lng;
			map.setCenter(new TMap.LatLng(myLat, myLng));
			/*if(marker==""){ // 自定义marker 来标记定位
				myMarkerGeometries={
				    id: "myLocation",
				    styleId: "myMarker",
				    position: new TMap.LatLng(myLat, myLng)
				  };
				marker = new TMap.MultiMarker({
				  map,
				  styles: {
					default: new TMap.MarkerStyle({
					  'width': 30,
					  'height': 40,
					  'labels':"456465",
					  'anchor': {
						x: 30/2,
						y: 0,
					  },
					  'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png?123',
					}),
				  },
				  geometries: [myMarkerGeometries]
				});
			}else{
				marker.setGeometries([
					{
					  id: "myLocation",
					  styleId: "myMarker",
					  position: new TMap.LatLng(myLat, myLng)
					}
				  ]); 
			}*/
			
			
			if(marker==""){
				myMarkerGeometries = new TMap.LatLng(myLat, myLng)
				marker = new Donut({
					map,
					position: new TMap.LatLng(myLat, myLng),
					content: "123",
				});
			}else{
				
				marker.position==new TMap.LatLng(39.9986945980902, 116.33598362780685);
				marker.updateDOM();
			}
			
			
		})
		
	}
			
</script>

</body>
</html>
